<template>
  <div class="study-plan">
    <h1>学习计划表</h1>
    <form class="form-section">
      <div class="form-item">
        <label>学习科目：</label>
        <input
          type="text"
          v-model="form.subject"
          placeholder="请输入学习科目"
        />
      </div>
      <div class="form-item">
        <label>学习内容：</label>
        <input
          type="text"
          v-model="form.content"
          placeholder="请输入学习内容"
        />
      </div>
      <div class="form-item">
        <label>学习地址：</label>
        <select v-model="form.location">
          <option value="自习室">自习室</option>
          <option value="图书馆">图书馆</option>
          <option value="教室">教室</option>
        </select>
      </div>
      <button type="button" @click="addPlan">添加</button>
    </form>

    <table class="plan-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>学习科目</th>
          <th>学习内容</th>
          <th>学习地点</th>
          <th>完成状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in planList" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.subject }}</td>
          <td>{{ item.content }}</td>
          <td>{{ item.location }}</td>
          <td>
            <input type="checkbox" v-model="item.completed" />
            {{ item.completed ? "已完成" : "未完成" }}
          </td>
          <td>
            <a href="javascript:void(0)" @click="deletePlan(index)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from "vue";

const form = ref({
  subject: "",
  content: "",
  location: "自习室"
});

const planList = ref([
  {
    subject: "Vue.js前端实战开发",
    content: "学习指令，例如v-if、v-for、v-model等",
    location: "自习室",
    completed: false
  }
]);

const addPlan = () => {
  if (!form.value.subject || !form.value.content) {
    alert("学习科目和内容不能为空");
    return;
  }
  planList.value.push({
    ...form.value,
    completed: false
  });
  form.value = {
    subject: "",
    content: "",
    location: "自习室"
  };
};

const deletePlan = (index) => {
  planList.value = planList.value.filter((_, i) => i !== index);
};
</script>

<style scoped>
.study-plan {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.form-section {
  margin-bottom: 20px;
}

.form-item {
  margin-bottom: 10px;
}

.form-item label {
  display: inline-block;
  width: 80px;
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
}

.plan-table th,
.plan-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
</style>
